<script setup lang="ts">
import { reactive } from 'vue';
interface Obj {
  [key: string]: string;
}

const props = defineProps<{
  value: string;
}>();
const state: {
  columns: {
    title: string;
    key: string;
    align: string;
    stylecolumn: string;
  }[];
  data: Obj[];
} = reactive({
  columns: [],
  data: [],
});

if (props.value.length > 0) {
  const obj: { data?: string[][]; title?: string[] } = JSON.parse(props.value);
  obj.title?.forEach((item, index) => {
    state.columns.push({
      title: item,
      key: `item-${index}`,
      align: 'center',
      stylecolumn: 'min-width:40px',
    });
  });
  obj.data?.forEach((item) => {
    const length = state.columns.length;
    const newObj: Obj = {};
    for (let i = 0; i < length; i++) {
      const value = item[i];
      const key = state.columns[i].key;
      newObj[key] = value;
    }
    state.data.push(newObj);
  });
}
</script>
<template>
  <nut-table class="table-type-item" :columns="state.columns" :data="state.data" striped />
</template>
<style lang="scss">
.table-type-item {
  font-size: 20px;
}
</style>
